@require '~styles/variables'
@require '~styles-lib/mixins'

.tag-thumbnail
	display: block
	margin-bottom: $line-height-computed

	// Looks weird on mobile devices.
	@media $media-md-up
		&:hover .-info
			theme-prop('color', 'highlight')

	&.active .-info
		change-bg('bi-bg')
		theme-prop('color', 'bi-fg')

.-image-spacer
	position: relative
	height: 0
	padding-top: 100% // Makes it same height as width.
	overflow: hidden

.-image
	change-bg('darkest')
	position: absolute
	top: 0
	right: 0
	bottom: 0
	left: 0
	display: flex
	align-items: center
	justify-content: center
	border-top-left-radius: $border-radius-large
	border-top-right-radius: $border-radius-large

	& > img
		width: 116px * 0.5
		height: 116px * 0.5

.-info
	change-bg('darkest')
	padding: 8px 0
	color: $white
	font-size: $font-size-small
	border-bottom-left-radius: $border-radius-large
	border-bottom-right-radius: $border-radius-large

.-label
	font-weight: bold
	text-align: center
